<template>
  <div>
    <mytop v-if="details.basicInfo" :title="details.basicInfo.name" />
    <div class="warp" v-if="details.basicInfo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in details.pics" :key="banner.id">
          <img :src="banner.pic" alt />
        </van-swipe-item>
      </van-swipe>
      <h3>{{details.basicInfo.name}}</h3>
    </div>
    <div v-if="details.content" class="content" v-html="content"></div>
    <div class="detailBottom">
      <van-goods-action>
        <van-goods-action-icon @click="$router.push('/home')" icon="chat-o" text="客服" />
        <van-goods-action-icon
          @click="$router.push('/cart')"
          icon="cart-o"
          text="购物车"
          :badge="cart.length===0?'':cart.length"
        />
        <van-goods-action-icon @click="$router.push('/mine')" icon="shop-o" text="我的" />
        <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton(0)" />
        <van-goods-action-button type="danger" text="立即购买" @click="onClickButton(1)" />
      </van-goods-action>
    </div>
    <div class="popus">
      <van-popup v-model="show" position="bottom" closeable :style="{ height: '30%' }" >
      <van-card
          :num="skus.num"
          :price="skus.minPrice"
          :desc="skus.characteristic"
          :title="skus.name"
          :thumb="skus.pic"
        >
          <template #footer>
            <van-stepper :value='nums' @change="onChangeNum" />
          </template>
        </van-card>
        <van-button round color="#456789" size="large" @click="agreeAdd">确定</van-button>
      </van-popup>
    </div>
  </div>
</template>

<script>
import mytop from 'components/My-Top'
import { DetailById } from 'api'
import { Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      title: '详情页',
      details: {},
      show: false,
      skus: {},
      checkNum: 0, // 判断点击购物车和购买实行不同的操作 给弹出框里面的确定按钮
      nums: 1
    }
  },
  computed: {
    content () {
      return this.details.content.replace(
        /<img/g,
        '<img style="dispaly:block"'
      )
    },
    ...mapState({
      cart: (state) => state.cart.cart.items
    })
  },
  created () {
    this.DetailById()
  },
  methods: {
    onChangeNum (value) {
      this.nums = value
    },
    isInCart (skus) {
      const index = this.cart.findIndex(item => item.id === skus.id)
      return index
    },
    addCart (cart) {
      if (this.isInCart(this.skus) === -1) {
        this.skus.num = this.nums
        this.add_cart(this.skus)
      } else {
        this.add_cart_num(this.isInCart(this.skus))
      }
    },
    agreeAdd () {
      if (this.checkNum === 0) {
        this.addCart(this.cart)
        Toast('加入购车成功')
        this.show = false
      } else {
        Toast('功能开发中')
      }
    },
    onClickIcon () {
      Toast('点击图标')
    },
    onClickButton (n) {
      // Toast('点击按钮')
      this.show = true
      this.checkNum = n
    },
    DetailById () {
      console.log(this)

      DetailById(this.$route.query.id).then((res) => {
        this.details = res.data.data
        this.skus = {
          ...res.data.data.basicInfo,
          num: 1,
          checked: true
        }
      })
    },
    ...mapMutations('cart', ['add_cart', 'add_cart_num'])
  },
  components: {
    mytop
  }
}
</script>

<style lang="scss" scoped>
/deep/ .my-swipe {
  margin-top: 46px;
  img {
    width: 100%;
  }
}
h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.content {
  /deep/ p {
    margin-block-start: 0;
    margin-block-end: 0;
  }
  /deep/ img {
    width: 100%;
    display: block;
    //  vertical-align:bottom ;
  }
}
</style>
